<template>
    <div class="dee-user">
        <img :src="userIcon"/>
        <span>{{userName}}</span>
        <div class="user-opration">
               <p class="user-opration-item"  v-show="administratorSettings">
               <router-link to="/">管理员设置</router-link></p>
               <p class="user-opration-item" >
               <router-link to="/">修改密码</router-link>
               </p>
               <p class="user-opration-item"
               @click="logoutHandle()"
               >
               <router-link to="">退出</router-link>
               </p>
        </div>
    </div>
</template>
<script>
  import userIcon from '@/assets/images/UserIcon.png';
  export default {
    data() {
      return {
        userIcon,
        userName: ''
      };
    },
    props: {
      administratorSettings: {
        type: Boolean,
        default: true
      }
    },
    mounted() {
      this.getUserName();
    },
    methods: {
      getUserName() {
        this.userName = this.$store.getters.userInfo && this.$store.getters.userInfo.truename;
      // console.log(this.$store.getters)
      },
      logoutHandle() {
        // logout
        this.$store.dispatch('user/logout').then(() => {
          // console.log(this.$store.state)
          // console.log(this.$router.redirect)
          this.$router.push({ path: this.redirect || '/login' });
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
@import "../../assets/scss/_mixins";

    .dee-user{
        @include flex-center();
        color: rgba(255, 255, 255, 0.7);
        position: relative;
        padding-right: 20px;
    }
    .dee-user>img{
        height: 36px;
        margin-right: 10px;
    }
    .dee-user:hover .user-opration{
        display: block;
        opacity: 1;
    }
    .user-opration{
        display: none;
        opacity: 0;
        width: 100%;
        position: absolute;
        top: 80%;
        left: 0;
        z-index: 2;
        @include border-radius(3px);
        border: 1px #DDD solid;
        background-color: #fff;
        padding: 10px 15px;
        transition: .5s;
    }
    .user-opration-item{
        line-height: 30px;
        color:#333;
        cursor: pointer;
        text-indent: 1em;
    }
    .user-opration .user-opration-item a:hover{
        color: #4FC3F7;
    }
</style>
